<template>
  <a-card :bordered="false" class="card-area">
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="姓名"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yxm }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="学号"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.xh }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动原因"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ydyym',
              {
                rules: [{ required: true, message: '请选择异动原因!' }]
              }]" allowClear>
              <a-select-option v-for="i in TYPE0302" :key="i.id" :value="String(i.code)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动日期"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-date-picker v-decorator="['ydrq',
              {
                rules: [{ required: true, message: '请选择异动日期!' }]
              }]" style="width: 100%"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动类型"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ydlbm',
              {
                rules: [{ required: true, message: '请选择异动类型!' }]
              }]" allowClear>
              <a-select-option v-for="i in TYPE0070" :key="i.id" :value="String(i.code)">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="性别"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yxbm }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="出生日期"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.ycsrq }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="证件类型"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yzjlxm }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="证件号码"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yzjhm }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="所在院系"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yyxsh }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="所在年级"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.ynj }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="培养层次"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.ypycc }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="研究方向"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.yyjfx }}
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动前导师"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.ydsbm }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动后导师"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['xdsm']">
              <a-select-option v-for="i in selectMenu.tutor" :key="i.id" :value="i.dsbh">{{ i.dsbh }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动前第二导师"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            {{ studentInfo.ydedsm }}
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="异动后第二导师"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['ydedsm']">
              <a-select-option v-for="i in selectMenu.tutor" :key="i.id" :value="i.dsbh">{{ i.dsbh }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="异动说明" :labelCol="{span: 4,offset: 1}" :wrapperCol="{span: 19}">
        <a-input type="textarea" v-decorator="['ydsm']" :autosize="{ minRows: 4, maxRows: 6 }"/>
      </a-form-item>
      <a-row style="text-align:center">
        <a-button :loading="loading" type="primary" @click="saveForm">保存</a-button>
      </a-row>
    </a-form>
  </a-card>
</template>
<script>
  import {mapState} from 'vuex'
  // import moment from 'moment'

  export default {
    data() {
      return {
        studentInfo: {},
        selectMenu: {},
        loading: false
      }
    },
    computed: {
      ...mapState({
        TYPE0070: state => state.app['TYPE0070'], // 异动类型
        TYPE0302: state => state.app['TYPE0302'] // 异动原因
      })
    },
    async created() {
      this.initDictionary()
      await this.initInfo()
      this.initSelectMenu()
    },
    beforeCreate() {
      this.form = this.$form.createForm(this)
    },
    methods: {
      initDictionary() {
        this.$store.dispatch('app/setDictionary', 'TYPE0070')
        this.$store.dispatch('app/setDictionary', 'TYPE0302')
      },
      initSelectMenu() {
        let allRequest = [
          this.$api.base.collegeAll(),
          this.$api.student.teacherQueryAll({xh: this.studentInfo.xh})
        ]
        console.log(this.studentInfo)
        Promise.all(allRequest).then(res => {
          this.selectMenu = {
            yx: res[0].data,
            tutor: res[1].data
          }
        })
      },
      initInfo() {
        return this.$api.student.transferingInfoById(this.$route.query.id).then(res => {
          this.studentInfo = res.data
          console.log(this.studentInfo)
          this.$nextTick(() => {
            this.form.setFieldsValue(res.data)
          })
        })
      },
      saveForm() {
        this.form.validateFields((err, values) => {
          if (err) {
            return
          }
          this.loading = true
          let params = Object.assign(this.studentInfo, values, {xjydId: this.$route.query.id})
          for (const key in params) {
            if (['xcsrq', 'xbyny', 'ydrq', 'createDate'].includes(key) && params[key]) {
              params[key] = params[key].format('YYYY-MM-DD hh:mm:ss')
            }
          }
          this.$api.student.transferingSave(params).then(res => {
            this.$message.success(res.msg)
          }).finally(() => {
            this.loading = false
          })
        })
      }
    }
  }
</script>
